<!DOCTYPE html>
<html lang="en">
<head>
  	<title>Portfolio</title>
  	<meta charset="utf-8">
    <meta name="description" content="Your description">
    <meta name="keywords" content="Your keywords">
    <meta name="author" content="Your name">
	<link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/script.js"></script>
<!--[if lt IE 8]>
   <div style=' clear: both; text-align:center; position: relative;'>
     <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
       <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
    </a>
  </div>
<![endif]-->
<!--[if lt IE 9]>
	<script src="js/html5.js"></script>
	<link rel="stylesheet" href="css/ie.css"> 
<![endif]-->
</head>
<body id="propage">
<!-- PRO Framework Panel Begin -->
<div id="advanced"><span class="trigger"><strong></strong><em></em></span><div class="bg_pro"><div class="pro_main"><span class="pro_logo"></span><ul class="pro_menu"><li><a href="index.html"><img src="images/pro_images/pro_home.png" alt=""></a></li><li><a href="404.html">Pages<span></span></a><ul>	<li><a href="under_construction.html">Under Construction</a></li><li><a href="intro.html">Intro Page</a></li><li><a href="404.html">404 page</a></li></ul></li><li><a href="layouts.html">Layouts</a></li><li><a href="typography.html">Typography</a></li><li class="current"><a href="pro_portfolio.html">Gallery Layouts<span></span></a><ul><li class="current"><a href="pro_portfolio.html">Portfolio</a></li><li><span></span><a href="just-slider.html">Sliders</a><ul><li><a href="just-slider.html">Just Slider</a></li><li><a href="kwicks.html">Kwicks Slider</a></li><li><a href="functional-slider.html">Functional Slider</a></li></ul></li><li><a href="gallery-page1.html">Gallery</a></li></ul></li><li><a href="misc.html">Extras<span></span></a><ul><li><a href="social_media.html">Social and Media<br> Sharing</a></li><li><a href="css3.html">CSS3 Tricks</a></li><li><a href="misc.html">Misc</a></li></ul></li></ul><div class="pro_clear"></div></div></div><div class="bg_pro2"></div></div>
<!-- PRO Framework Panel End -->
<!-- Header -->
<header>
    <div class="main">
        <h1><a href="index.html">Prospect</a></h1>
        <span class="phone">Call Toll-Free:  <span>1-800-559-65-80</span></span>
        <nav>
            <ul class="sf-menu">
                <li><a href="index.html">About us</a><ul>
                        <li><a href="more.html">Who We Are</a></li>
                        <li><a href="more.html">Our Mission</a></li>
                    </ul>
                </li>
                <li><a href="index-1.html">Services</a></li>
                <li><a href="index-2.html">Solutions</a></li>
                <li><a href="index-3.html">Support</a></li>
                <li><a href="index-4.html">partners</a></li>
                <li><a href="index-5.html">Contacts</a></li>
            </ul>
        </nav>
        <div class="clear"></div>
    </div>
</header>
<!-- Content -->
<section id="content">
	<div class="container_24">
		<div class="pro_wrapper"><div class="grid_24"><h2 class="pro_title3">Portfolio Page</h2></div></div>
	</div>
	<div class="pro_tabs pro_tabs4">
		<div class="pro_wrapper">
			<ul class="pro_layouts-menu">
				<li class="pro_portfolio3_capt"><a href="#"><span></span></a></li>
				<li class="pro_portfolio3"><a href="#"><span></span></a></li>
				<li class="pro_portfolio4_capt"><a href="#"><span></span></a></li>
				<li class="pro_portfolio4"><a href="#"><span></span></a></li>
				<li class="pro_portfolio2_capt"><a href="#"><span></span></a></li>
				<li class="pro_portfolio2"><a href="#"><span></span></a></li>
				<li class="pro_portfolio1"><a href="#" class="current"><span></span></a></li>
			</ul>
		</div>
<!-- Three with Caption Columns Begin -->
		<div class="pro_tab-content">
			<div class="container_24">
				<div class="pro_wrapper">
					<div class="grid_8">
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/280x200_2.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_3.jpg" data-gal="prettyPhoto[gallery]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/280x200_3.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_4.jpg" data-gal="prettyPhoto[gallery]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/280x200_4.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
					</div>
					<div class="grid_8">
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_5.jpg" data-gal="prettyPhoto[gallery]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/280x200_5.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_6.jpg" data-gal="prettyPhoto[gallery]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/280x200_6.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_7.jpg" data-gal="prettyPhoto[gallery]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/280x200_7.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
					</div>
					<div class="grid_8">
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_8.jpg" data-gal="prettyPhoto[gallery]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/280x200_8.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_1.jpg" data-gal="prettyPhoto[gallery]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/280x200_1.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/280x200_2.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
					</div>
				</div>
				<div class="pro_wrapper">
					<div class="grid_24">
						<dl class="pro_description-box pro_description-box-pad3">
					<dt><a class="pro_description-dark">Description<span></span></a></dt>
					<dd>
						<div class="pro_inner">
<pre class="pro_htmlCode">&lt;div class="container_24"&gt;
	&lt;div class="pro_wrapper"&gt;
		&lt;div class="grid_8"&gt;
			&lt;div class="pro_wrapper pro_pad_port"&gt;
				&lt;a data-gal="prettyPhoto[gallery]" class="pro_image_style3 pro_image_with_capt lightbox-image" href="YourBigImage.jpg"&gt;&lt;img src="YourImage.jpg" alt=""&gt;&lt;/a&gt;
				&lt;p&gt; Text &lt;/p&gt;
				&lt;a href="" class="pro_btn">Read More&lt;/a&gt;
			&lt;/div>
		&lt;/div&gt;
		&lt;div class="grid_8"&gt;
			&lt;div class="pro_wrapper pro_pad_port"&gt;
				&lt;a data-gal="prettyPhoto[gallery]" class="pro_image_style3 pro_image_with_capt lightbox-image" href="YourBigImage.jpg"&gt;&lt;img src="YourImage.jpg" alt=""&gt;&lt;/a&gt;
				&lt;p&gt; Text &lt;/p&gt;
				&lt;a href="" class="pro_btn">Read More&lt;/a&gt;
			&lt;/div>
		&lt;/div&gt;
		&lt;div class="grid_8"&gt;
			&lt;div class="pro_wrapper pro_pad_port"&gt;
				&lt;a data-gal="prettyPhoto[gallery]" class="pro_image_style3 pro_image_with_capt lightbox-image" href="YourBigImage.jpg"&gt;&lt;img src="YourImage.jpg" alt=""&gt;&lt;/a&gt;
				&lt;p&gt; Text &lt;/p&gt;
				&lt;a href="" class="pro_btn">Read More&lt;/a&gt;
			&lt;/div>
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>
						</div>
					</dd>
				</dl>
					</div>
				</div>
			</div>
		</div>
<!-- Three with Caption Columns End -->
<!-- Three Columns Begin -->
		<div class="pro_tab-content">
			<div class="container_24">
				<div class="pro_wrapper small-image">
					<div class="grid_8">
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery5]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/280x200_2.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_5.jpg" data-gal="prettyPhoto[gallery5]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/280x200_5.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_8.jpg" data-gal="prettyPhoto[gallery5]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/280x200_8.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_3.jpg" data-gal="prettyPhoto[gallery5]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/280x200_3.jpg" alt=""></a>
						</div>
					</div>
					<div class="grid_8">
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_3.jpg" data-gal="prettyPhoto[gallery5]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/280x200_3.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_6.jpg" data-gal="prettyPhoto[gallery5]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/280x200_6.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_1.jpg" data-gal="prettyPhoto[gallery5]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/280x200_1.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_4.jpg" data-gal="prettyPhoto[gallery5]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/280x200_4.jpg" alt=""></a>
						</div>
					</div>
					<div class="grid_8">
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_4.jpg" data-gal="prettyPhoto[gallery5]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/280x200_4.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_7.jpg" data-gal="prettyPhoto[gallery5]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/280x200_7.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery5]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/280x200_2.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_5.jpg" data-gal="prettyPhoto[gallery5]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/280x200_5.jpg" alt=""></a>
						</div>
					</div>
				</div>
				<div class="pro_wrapper">
					<div class="grid_24">
						<dl class="pro_description-box pro_description-box-pad3">
					<dt><a class="pro_description-dark">Description<span></span></a></dt>
					<dd>
						<div class="pro_inner">
<pre class="pro_htmlCode">&lt;div class="container_24"&gt;
	&lt;div class="pro_wrapper"&gt;
		&lt;div class="grid_8"&gt;
			&lt;div class="pro_wrapper pro_pad_port"&gt;
				&lt;a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery5]" class="pro_image_style3 lightbox-image" href="YourBigImage.jpg"&gt;&lt;img src="YourImage.jpg" alt=""&gt;&lt;/a&gt;
			&lt;/div>
		&lt;/div&gt;
		&lt;div class="grid_8"&gt;
			&lt;div class="pro_wrapper pro_pad_port"&gt;
				&lt;a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery5]" class="pro_image_style3 lightbox-image" href="YourBigImage.jpg"&gt;&lt;img src="YourImage.jpg" alt=""&gt;&lt;/a&gt;
			&lt;/div>
		&lt;/div&gt;
		&lt;div class="grid_8"&gt;
			&lt;div class="pro_wrapper pro_pad_port"&gt;
				&lt;a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery5]" class="pro_image_style3 lightbox-image" href="YourBigImage.jpg"&gt;&lt;img src="YourImage.jpg" alt=""&gt;&lt;/a&gt;
			&lt;/div>
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>
						</div>
					</dd>
				</dl>
					</div>
				</div>
			</div>
		</div>
<!-- Three Columns End -->
<!-- Four with Caption Columns Begin -->
		<div class="pro_tab-content">
			<div class="container_24">
				<div class="pro_wrapper">
					<div class="grid_6">
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery2]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/200x150_2.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_3.jpg" data-gal="prettyPhoto[gallery2]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/200x150_3.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_4.jpg" data-gal="prettyPhoto[gallery2]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/200x150_4.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_5.jpg" data-gal="prettyPhoto[gallery2]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/200x150_5.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
					</div>
					<div class="grid_6">
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_6.jpg" data-gal="prettyPhoto[gallery2]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/200x150_6.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_7.jpg" data-gal="prettyPhoto[gallery2]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/200x150_7.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_8.jpg" data-gal="prettyPhoto[gallery2]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/200x150_8.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery2]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/200x150_1.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
					</div>
					<div class="grid_6">
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_1.jpg" data-gal="prettyPhoto[gallery2]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/200x150_1.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery2]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/200x150_2.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_3.jpg" data-gal="prettyPhoto[gallery2]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/200x150_3.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_4.jpg" data-gal="prettyPhoto[gallery2]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/200x150_4.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
					</div>
					<div class="grid_6">
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_5.jpg" data-gal="prettyPhoto[gallery2]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/200x150_5.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_6.jpg" data-gal="prettyPhoto[gallery2]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/200x150_6.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_7.jpg" data-gal="prettyPhoto[gallery2]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/200x150_7.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_8.jpg" data-gal="prettyPhoto[gallery2]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/200x150_8.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
					</div>
				</div>
				<div class="pro_wrapper">
					<div class="grid_24">
						<dl class="pro_description-box pro_description-box-pad3">
					<dt><a class="pro_description-dark">Description<span></span></a></dt>
					<dd>
						<div class="pro_inner">
<pre class="pro_htmlCode">&lt;div class="container_24"&gt;
	&lt;div class="pro_wrapper"&gt;
		&lt;div class="grid_6"&gt;
			&lt;div class="pro_wrapper pro_pad_port"&gt;
				&lt;a data-gal="prettyPhoto[gallery]" class="pro_image_style3 pro_image_with_capt lightbox-image" href="YourBigImage.jpg"&gt;&lt;img src="YourImage.jpg" alt=""&gt;&lt;/a&gt;
				&lt;p&gt; Text &lt;/p&gt;
				&lt;a href="" class="pro_btn">Read More&lt;/a&gt;
			&lt;/div>
		&lt;/div&gt;
		&lt;div class="grid_6"&gt;
			&lt;div class="pro_wrapper pro_pad_port"&gt;
				&lt;a data-gal="prettyPhoto[gallery]" class="pro_image_style3 pro_image_with_capt lightbox-image" href="YourBigImage.jpg"&gt;&lt;img src="YourImage.jpg" alt=""&gt;&lt;/a&gt;
				&lt;p&gt; Text &lt;/p&gt;
				&lt;a href="" class="pro_btn">Read More&lt;/a&gt;
			&lt;/div>
		&lt;/div&gt;
		&lt;div class="grid_6"&gt;
			&lt;div class="pro_wrapper pro_pad_port"&gt;
				&lt;a data-gal="prettyPhoto[gallery]" class="pro_image_style3 pro_image_with_capt lightbox-image" href="YourBigImage.jpg"&gt;&lt;img src="YourImage.jpg" alt=""&gt;&lt;/a&gt;
				&lt;p&gt; Text &lt;/p&gt;
				&lt;a href="" class="pro_btn">Read More&lt;/a&gt;
			&lt;/div>
		&lt;/div&gt;
		&lt;div class="grid_6"&gt;
			&lt;div class="pro_wrapper pro_pad_port"&gt;
				&lt;a data-gal="prettyPhoto[gallery]" class="pro_image_style3 pro_image_with_capt lightbox-image" href="YourBigImage.jpg"&gt;&lt;img src="YourImage.jpg" alt=""&gt;&lt;/a&gt;
				&lt;p&gt; Text &lt;/p&gt;
				&lt;a href="" class="pro_btn">Read More&lt;/a&gt;
			&lt;/div>
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>
						</div>
					</dd>
				</dl>
					</div>
				</div>
			</div>
		</div>
<!-- Four with Caption Columns End -->
<!-- Four Columns Begin -->
		<div class="pro_tab-content">
			<div class="container_24">
				<div class="pro_wrapper">
					<div class="grid_6">
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_1.jpg" data-gal="prettyPhoto[gallery6]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/200x150_1.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery6]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/200x150_2.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_8.jpg" data-gal="prettyPhoto[gallery6]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/200x150_8.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_4.jpg" data-gal="prettyPhoto[gallery6]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/200x150_4.jpg" alt=""></a>
						</div>
					</div>
					<div class="grid_6">
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery6]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/200x150_2.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_3.jpg" data-gal="prettyPhoto[gallery6]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/200x150_3.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_5.jpg" data-gal="prettyPhoto[gallery6]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/200x150_5.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery6]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/200x150_2.jpg" alt=""></a>
						</div>
					</div>
					<div class="grid_6">
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_3.jpg" data-gal="prettyPhoto[gallery6]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/200x150_3.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_4.jpg" data-gal="prettyPhoto[gallery6]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/200x150_4.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_7.jpg" data-gal="prettyPhoto[gallery6]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/200x150_7.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_3.jpg" data-gal="prettyPhoto[gallery6]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/200x150_3.jpg" alt=""></a>
						</div>
					</div>
					<div class="grid_6">
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_1.jpg" data-gal="prettyPhoto[gallery6]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/200x150_1.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_5.jpg" data-gal="prettyPhoto[gallery6]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/200x150_5.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_4.jpg" data-gal="prettyPhoto[gallery6]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/200x150_4.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_8.jpg" data-gal="prettyPhoto[gallery6]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/200x150_8.jpg" alt=""></a>
						</div>
					</div>
				</div>
				<div class="pro_wrapper">
					<div class="grid_24">
						<dl class="pro_description-box pro_description-box-pad3">
					<dt><a class="pro_description-dark">Description<span></span></a></dt>
					<dd>
						<div class="pro_inner">
<pre class="pro_htmlCode">&lt;div class="container_24"&gt;
	&lt;div class="pro_wrapper"&gt;
		&lt;div class="grid_6"&gt;
			&lt;div class="pro_wrapper pro_pad_port"&gt;
				&lt;a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery5]" class="pro_image_style3 lightbox-image" href="YourBigImage.jpg"&gt;&lt;img src="YourImage.jpg" alt=""&gt;&lt;/a&gt;
			&lt;/div>
		&lt;/div&gt;
		&lt;div class="grid_6"&gt;
			&lt;div class="pro_wrapper pro_pad_port"&gt;
				&lt;a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery5]" class="pro_image_style3 lightbox-image" href="YourBigImage.jpg"&gt;&lt;img src="YourImage.jpg" alt=""&gt;&lt;/a&gt;
			&lt;/div>
		&lt;/div&gt;
		&lt;div class="grid_6"&gt;
			&lt;div class="pro_wrapper pro_pad_port"&gt;
				&lt;a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery5]" class="pro_image_style3 lightbox-image" href="YourBigImage.jpg"&gt;&lt;img src="YourImage.jpg" alt=""&gt;&lt;/a&gt;
			&lt;/div>
		&lt;/div&gt;
		&lt;div class="grid_6"&gt;
			&lt;div class="pro_wrapper pro_pad_port"&gt;
				&lt;a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery5]" class="pro_image_style3 lightbox-image" href="YourBigImage.jpg"&gt;&lt;img src="YourImage.jpg" alt=""&gt;&lt;/a&gt;
			&lt;/div>
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>
						</div>
					</dd>
				</dl>
					</div>
				</div>
			</div>
		</div>
<!-- Four Columns End -->
<!-- Two Columns with Caption Begin -->
		<div class="pro_tab-content">
			<div class="container_24">
				<div class="pro_wrapper">
					<div class="grid_12">
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_1.jpg" data-gal="prettyPhoto[gallery3]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/450x300_1.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery3]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/450x300_2.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_3.jpg" data-gal="prettyPhoto[gallery3]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/450x300_3.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
					</div>
					<div class="grid_12">
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_4.jpg" data-gal="prettyPhoto[gallery3]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/450x300_4.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_5.jpg" data-gal="prettyPhoto[gallery3]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/450x300_5.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_6.jpg" data-gal="prettyPhoto[gallery3]" class="pro_image_style3 pro_image_with_capt lightbox-image"><img src="images/stock_images/450x300_6.jpg" alt=""></a>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue.</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
					</div>
				</div>
				<div class="pro_wrapper">
					<div class="grid_24">
						<dl class="pro_description-box pro_description-box-pad3">
					<dt><a class="pro_description-dark">Description<span></span></a></dt>
					<dd>
						<div class="pro_inner">
<pre class="pro_htmlCode">&lt;div class="container_24"&gt;
	&lt;div class="pro_wrapper"&gt;
		&lt;div class="grid_12"&gt;
			&lt;div class="pro_wrapper pro_pad_port"&gt;
				&lt;a data-gal="prettyPhoto[gallery]" class="pro_image_style3 pro_image_with_capt lightbox-image" href="YourBigImage.jpg"&gt;&lt;img src="YourImage.jpg" alt=""&gt;&lt;/a&gt;
				&lt;p&gt; Text &lt;/p&gt;
				&lt;a href="" class="pro_btn">Read More&lt;/a&gt;
			&lt;/div>
		&lt;/div&gt;
		&lt;div class="grid_12"&gt;
			&lt;div class="pro_wrapper pro_pad_port"&gt;
				&lt;a data-gal="prettyPhoto[gallery]" class="pro_image_style3 pro_image_with_capt lightbox-image" href="YourBigImage.jpg"&gt;&lt;img src="YourImage.jpg" alt=""&gt;&lt;/a&gt;
				&lt;p&gt; Text &lt;/p&gt;
				&lt;a href="" class="pro_btn">Read More&lt;/a&gt;
			&lt;/div>
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>
						</div>
					</dd>
				</dl>
					</div>
				</div>
			</div>
		</div>
<!-- Two Columns with Caption End -->
<!-- Two Columns Begin -->
		<div class="pro_tab-content">
			<div class="container_24">
				<div class="pro_wrapper">
					<div class="grid_12">
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_1.jpg" data-gal="prettyPhoto[gallery7]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/450x300_1.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery7]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/450x300_2.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_3.jpg" data-gal="prettyPhoto[gallery7]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/450x300_3.jpg" alt=""></a>
						</div>
					</div>
					<div class="grid_12">
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_4.jpg" data-gal="prettyPhoto[gallery7]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/450x300_4.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_5.jpg" data-gal="prettyPhoto[gallery7]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/450x300_5.jpg" alt=""></a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<a href="images/stock_images/900x500_6.jpg" data-gal="prettyPhoto[gallery7]" class="pro_image_style3 lightbox-image"><img src="images/stock_images/450x300_6.jpg" alt=""></a>
						</div>
					</div>
				</div>
				<div class="pro_wrapper">
					<div class="grid_24">
						<dl class="pro_description-box pro_description-box-pad3">
					<dt><a class="pro_description-dark">Description<span></span></a></dt>
					<dd>
						<div class="pro_inner">
<pre class="pro_htmlCode">&lt;div class="container_24"&gt;
	&lt;div class="pro_wrapper"&gt;
		&lt;div class="grid_12"&gt;
			&lt;div class="pro_wrapper pro_pad_port"&gt;
				&lt;a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery5]" class="pro_image_style3 lightbox-image" href="YourBigImage.jpg"&gt;&lt;img src="YourImage.jpg" alt=""&gt;&lt;/a&gt;
			&lt;/div>
		&lt;/div&gt;
		&lt;div class="grid_12"&gt;
			&lt;div class="pro_wrapper pro_pad_port"&gt;
				&lt;a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery5]" class="pro_image_style3 lightbox-image" href="YourBigImage.jpg"&gt;&lt;img src="YourImage.jpg" alt=""&gt;&lt;/a&gt;
			&lt;/div>
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>
						</div>
					</dd>
				</dl>
					</div>
				</div>
			</div>
		</div>
<!-- Two Columns End -->
<!-- Full-width Begin -->
		<div class="pro_tab-content">
			<div class="container_24">
				<div class="pro_wrapper">
					<div class="grid_24">
						<div class="pro_wrapper pro_pad_port">
							<div class="pro_image_left"><a href="images/stock_images/900x500_1.jpg" data-gal="prettyPhoto[gallery8]" class="lightbox-image"><img src="images/stock_images/300x200_1.jpg" alt=""></a></div>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede.</p>
							<p>Mauris accumsan nulla vel diam. Sed lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac lorem. Vestibulum sed ante. Donec sagittis euismod purus voluptatem accusantium doloremque. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<div class="pro_image_left"><a href="images/stock_images/900x500_2.jpg" data-gal="prettyPhoto[gallery8]" class="lightbox-image pro_image_style1"><img src="images/stock_images/300x200_2.jpg" alt=""></a></div>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede.</p>
							<p>Mauris accumsan nulla vel diam. Sed lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac lorem. Vestibulum sed ante. Donec sagittis euismod purus voluptatem accusantium doloremque. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
							<a href="#" class="pro_btn">Read More</a>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<div class="pro_image_right"><a href="images/stock_images/900x500_3.jpg" data-gal="prettyPhoto[gallery8]" class="lightbox-image pro_image_style2"><img src="images/stock_images/300x200_3.jpg" alt=""></a></div>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede.</p>
							<p>Mauris accumsan nulla vel diam. Sed lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac lorem. Vestibulum sed ante. Donec sagittis euismod purus voluptatem accusantium doloremque. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
							<div class=" alignright"><a href="#" class="pro_btn">Read More</a></div>
						</div>
						<div class="pro_wrapper pro_pad_port">
							<div class="pro_image_right"><a href="images/stock_images/900x500_4.jpg" data-gal="prettyPhoto[gallery8]" class="lightbox-image pro_image_style3"><img src="images/stock_images/300x200_4.jpg" alt=""></a></div>
							<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede.</p>
							<p>Mauris accumsan nulla vel diam. Sed lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac lorem. Vestibulum sed ante. Donec sagittis euismod purus voluptatem accusantium doloremque. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
							<div class="alignright"><a href="#" class="pro_btn">Read More</a></div>
						</div>
					</div>
				</div>
				<div class="pro_wrapper">
					<div class="grid_24">
						<dl class="pro_description-box pro_description-box-pad3">
					<dt><a class="pro_description-dark">Description<span></span></a></dt>
					<dd>
						<div class="pro_inner">
<pre class="pro_htmlCode">&lt;div class="container_24"&gt;
	&lt;div class="pro_wrapper"&gt;
		&lt;div class="grid_24"&gt;
			&lt;div class="pro_wrapper pro_pad_port"&gt;
				&lt;div class="image_left"&gt;&lt;img src="YourImage.jpg" alt=""&gt;&lt;/div&gt;
				&lt;p&gt; Text &lt;/p&gt;
			&lt;/div>
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>
						</div>
					</dd>
				</dl>
					</div>
				</div>
			</div>
		</div>
<!-- Full-width End -->
	</div>
	<div class="container_24">
		<div class="pro_wrapper">
			<div class="grid_24">
				<h3 class="pro_title">Filter Images</h3>
				 <ul class="pro_splitter">
					 <li>
						 <ul class="fleft">
							 <li class="segment-1 selected-1 pro_btn"><a data-value="all">Everything</a></li>
							 <li class="segment-0 pro_btn"><a data-value="pro_blond">Products</a></li>
							 <li class="segment-2 last pro_btn"><a data-value="pro_brun">Services</a></li>
						 </ul>
					 </li>
				 </ul>
			</div>
		</div>
		<div class="pro_wrapper">
          <ul id="pro_boxes-filter" class="pro_image-grid">
            <li data-id="id-1" class="pro_blond">
				<a href="#" class="pro_image_style3 pro_image_with_capt"><img src="images/stock_images/200x150_1.jpg" alt=""></a>
				<p>Vestibulum libero nisl neque.</p>
				<a href="#" class="pro_btn">Read More</a>
            </li>
            <li data-id="id-2" class="pro_brun">
				<a href="#" class="pro_image_style3 pro_image_with_capt"><img src="images/stock_images/200x150_2.jpg" alt=""></a>
				<p>Vestibulum libero nisl neque.</p>
				<a href="#" class="pro_btn">Read More</a>
            </li>
            <li data-id="id-3" class="pro_blond">
				<a href="#" class="pro_image_style3 pro_image_with_capt"><img src="images/stock_images/200x150_3.jpg" alt=""></a>
				<p>Vestibulum libero nisl neque.</p>
				<a href="#" class="pro_btn">Read More</a>
            </li>
            <li data-id="id-4" class="pro_brun">
				<a href="#" class="pro_image_style3 pro_image_with_capt"><img src="images/stock_images/200x150_4.jpg" alt=""></a>
				<p>Vestibulum libero nisl neque.</p>
				<a href="#" class="pro_btn">Read More</a>
            </li>
            <li data-id="id-5" class="pro_blond">
				<a href="#" class="pro_image_style3 pro_image_with_capt"><img src="images/stock_images/200x150_5.jpg" alt=""></a>
				<p>Vestibulum libero nisl neque.</p>
				<a href="#" class="pro_btn">Read More</a>
            </li>
            <li data-id="id-6" class="pro_blond">
				<a href="#" class="pro_image_style3 pro_image_with_capt"><img src="images/stock_images/200x150_6.jpg" alt=""></a>
				<p>Vestibulum libero nisl neque.</p>
				<a href="#" class="pro_btn">Read More</a>
            </li>
            <li data-id="id-7" class="pro_blond">
				<a href="#" class="pro_image_style3 pro_image_with_capt"><img src="images/stock_images/200x150_7.jpg" alt=""></a>
				<p>Vestibulum libero nisl neque.</p>
				<a href="#" class="pro_btn">Read More</a>
            </li>
            <li data-id="id-8" class="pro_brun">
				<a href="#" class="pro_image_style3 pro_image_with_capt"><img src="images/stock_images/200x150_8.jpg" alt=""></a>
				<p>Vestibulum libero nisl neque.</p>
				<a href="#" class="pro_btn">Read More</a>
            </li>
            <li data-id="id-9" class="pro_brun">
				<a href="#" class="pro_image_style3 pro_image_with_capt"><img src="images/stock_images/200x150_4.jpg" alt=""></a>
				<p>Vestibulum libero nisl neque.</p>
				<a href="#" class="pro_btn">Read More</a>
            </li>
            <li data-id="id-10" class="pro_blond">
				<a href="#" class="pro_image_style3 pro_image_with_capt"><img src="images/stock_images/200x150_3.jpg" alt=""></a>
				<p>Vestibulum libero nisl neque.</p>
				<a href="#" class="pro_btn">Read More</a>
            </li>
            <li data-id="id-11" class="pro_brun">
				<a href="#" class="pro_image_style3 pro_image_with_capt"><img src="images/stock_images/200x150_2.jpg" alt=""></a>
				<p>Vestibulum libero nisl neque.</p>
				<a href="#" class="pro_btn">Read More</a>
            </li>
            <li data-id="id-12" class="pro_blond">
				<a href="#" class="pro_image_style3 pro_image_with_capt"><img src="images/stock_images/200x150_1.jpg" alt=""></a>
				<p>Vestibulum libero nisl neque.</p>
				<a href="#" class="pro_btn">Read More</a>
            </li>
          </ul>
		  </div>
		  <div class="pro_wrapper">
		  	<div class="grid_24">
		 		<dl class="pro_description-box pro_description-box-pad3">
					<dt><a class="pro_description-dark">Description<span></span></a></dt>
					<dd>
						<div class="pro_inner">
						<p><a href="http://razorjack.net/quicksand/index.html">QuickSand plugin</a> (<strong>jquery.quicksand.js</strong>) is used to filter images.</p>
						<p>Quicksand replaces one collection of items with another. All you need to do is provide those two sets of items.</p>
						<p>First of all create a list with image categories.</p>
<pre class="pro_htmlCode">&lt;ul class="pro_splitter"&gt;
	&lt;li&gt;
		 &lt;ul class="fleft"&gt;
			&lt;li class="segment-1 selected-1"&gt;&lt;a data-value="all" class="pro_btn"&gt;Everything&lt;/a&gt;&lt;/li&gt;
			&lt;li class="segment-0"&gt;&lt;a data-value="Category1" class="pro_btn"&gt;Category 1&lt;/a&gt;&lt;/li&gt;
			&lt;li class="segment-2 last"&gt;&lt;a data-value="Category2" class="pro_btn"&gt;Category 2&lt;/a&gt;&lt;/li&gt;
		 &lt;/ul&gt;
	 &lt;/li&gt;
&lt;/ul&gt;</pre>
						<p>Then you need to create a list of items that will be filtered.</p>					
 <pre class="pro_htmlCode">&lt;ul id="pro_boxes-filter" class="pro_image-grid"&gt;
	&lt;li data-id="id-1" class="Category1"&gt;
		Your Object Content
	&lt;/li&gt;
	&lt;li data-id="id-2" class="Category2"&gt;
		Your Object Content
	&lt;/li&gt;
	...
&lt;/ul&gt;</pre>
						<p>Please note that each new &lt;li&gt; tag should have attribute<strong> data-id="id-1"</strong> assigned with sufficient id number and class <strong>class="Category1"</strong> with the required category name. Please make sure that your category name matches the data-value attribute in the categories list. It is required to define  <strong>.pro_image-grid li</strong> element width and height in <strong>style.css </strong>file.</p>
						</div>
					</dd>
				</dl>
			</div>
		  </div>
	</div>
</section>
<aside>
    <div class="container_24">
        <div class="wrapper">
            <article class="grid_12">
                <h6>Quick Links</h6>
                <div class="wrapper">
                    <article class="grid_4 alpha">
                        <ul>
                            <li><a href="more.html">About Us</a></li>
                            <li><a href="more.html">Testimonials</a></li>
                            <li><a href="more.html">Our Staff</a></li>
                            <li><a href="more.html">Events &amp; Press</a></li>
                            <li><a href="more.html">Contact Us</a></li>
                        </ul>
                    </article>
                    <article class="grid_4">
                        <ul>
                            <li><a href="more.html">Solutions &amp; Training</a></li>
                            <li><a href="more.html">Affiliate Program</a></li>
                            <li><a href="more.html">Production</a></li>
                            <li><a href="more.html">Risk Management</a></li>
                            <li><a href="more.html">Consultation</a></li>
                        </ul>
                    </article>
                    <article class="grid_4 omega">
                        <ul>
                            <li><a href="more.html">Sign Up</a></li>
                            <li><a href="more.html">Forums</a></li>
                            <li><a href="more.html">Affiliate Program</a></li>
                            <li><a href="more.html">FAQ</a></li>
                        </ul>
                    </article>
                </div>
            </article>
            <article class="grid_11 prefix_1">
                <h6>Contact Information</h6>
                <div class="wrapper">
                    <img class="img-indent-r" src="images/map.png" alt="">
                    <div class="extra-wrap">
                        <p>8901 Marmora Road Glasgow, D04 89GR</p>
                        Phone: +1 800 559 6580<br>
                        E-mail: mail@demolink.org<br>
                        <!--==============================footer=================================-->
                        <footer>
                            &copy; 2012 &nbsp; &nbsp;|&nbsp; &nbsp; <a href="index-6.html">Privacy Policy</a><br>
                        </footer>
                    </div>
                </div>
            </article>
        </div>
    </div>
</aside>
</body>
</html>